<template>
    <div>
        <SearchPanel @onSearch="searchHandle" :loading="loading" :isTop="true" :isReset="true">
            <el-form :model="searchValue" label-width="120px" label-position="right">
                <el-row>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="药店名称">
                            <el-input v-model="searchValue.drugstorename" placeholder="请输入药店名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="用户名">
                            <el-input v-model="searchValue.name" placeholder="请输入用户名" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="联系方式">
                            <el-input v-model="searchValue.contactnumber" placeholder="请输入联系方式" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="创建开始时间">
                            <el-date-picker v-model="searchValue.startTime" type="datetime" format="yyyy-MM-dd dd:mm:ss" placeholder="选择创建开始时间"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="创建结束时间">
                            <el-date-picker v-model="searchValue.endTime" type="datetime" format="yyyy-MM-dd dd:mm:ss" placeholder="选择创建结束时间"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :lg="8" :sm="12">
                        <el-form-item label="是否启用">
                            <el-date-picker v-model="searchValue.endTime" type="datetime" placeholder="选择创建结束时间"> </el-date-picker>
                        </el-form-item>
                    </el-col> -->
                </el-row>
            </el-form>
        </SearchPanel>
        <DataPanel>
            <el-table
                border
                :data="listData"
                style="width: 100%"
                v-loading="loading"
                :header-cell-style="{ background: '#f6f6f6' }"
                ref="multipleTable"
            >
                <el-table-column prop="drugstoreName" :show-overflow-tooltip="true" label="药品名称"></el-table-column>
                <el-table-column prop="name" :show-overflow-tooltip="true" label="用户名"></el-table-column>
                <el-table-column prop="contactNumber" :show-overflow-tooltip="true" label="联系方式"></el-table-column>
                <el-table-column prop="enable" label="详细地址">
                    <template slot-scope="scope">
                        {{ scope.row.province }} {{ scope.row.city }} {{ scope.row.area }} {{ scope.row.detailedAddress }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" :show-overflow-tooltip="true" label="创建时间"></el-table-column>
                <el-table-column prop="enableStatus" :show-overflow-tooltip="true" label="状态"></el-table-column>
                <el-table-column prop="" label="操作" width="180">
                    <template slot-scope="scope">
                        <div class="operation">
                            <span @click="optHandle(scope.row.id, true)" v-if="scope.row.enableStatus == '禁用'">启用</span>
                            <span @click="optHandle(scope.row.id, false)" v-else>禁用</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </DataPanel>
        <el-dialog :title="dTitle" :visible.sync="dialogVisible" width="40%">
            <el-form :model="form" ref="form" :rules="formRules" hide-required-asterisk>
                <el-form-item label="药品分类:" prop="classAlias" :label-width="'24%'" :rules="formRules.blur">
                    <el-col :span="16">
                        <el-input class="w" type="text" maxlength="30" v-model="form.classAlias" placeholder="请输入药品分类"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" plain size="medium" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" size="medium" @click="submitForm">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
import DataPanel from '@/components/DataPanel.vue';
import SearchPanel from '@/components/SearchPanel.vue';
import ButtonPanel from '@/components/ButtonPanel.vue';
import { formRules } from '@/common/util/validator';
import { api } from '@/http/api';
import { Type } from '@/http/interface';
declare var $: any;

@Component({
    components: {
        SearchPanel,
        DataPanel,
        ButtonPanel,
    },
})
export default class DrugManage extends Vue {
    formRules = formRules;
    public loading: boolean = false;
    public dialogVisible: boolean = false;
    public listData: any = [];
    public total: number = 0;
    public dTitle: string = '';
    public $refs: {
        form: HTMLFormElement;
        multipleTable: HTMLFormElement;
    };
    public searchPagin = {
        skip: 0,
        count: 10,
        currentPage: 1,
    };
    public searchValue = {
        drugstorename: '',
        name: '',
        contactnumber: '',
        startTime: '',
        endTime: '',
    };
    /** 表单 */
    public form = {
        id: 0,
        classAlias: '',
    };
    mounted() {
        this.loadData();
    }
    /** 查询 */
    public searchHandle() {
        this.loadData();
    }
    /**获取列表 */
    public async loadData() {
        this.loading = true;
        try {
            let res = await api.Pharmacy_GetPharmacyInfoList({
                ...this.searchValue,
                skip: this.searchPagin.skip,
                count: this.searchPagin.count,
            });
            this.loading = false;
            this.listData = res.items;
            this.total = res.totalCount;
            if (this.total > 0 && this.listData.length == 0) {
                this.searchPagin.skip = 0;
                this.loadData();
            }
        } catch {
            this.loading = false;
        }
    }
    /** 新增 */
    public addHandle() {
        this.dialogVisible = true;
        this.dTitle = '新增药品分类';
    }
    /** 编辑 */
    public editHandle(id) {
        this.form.id = id;
        this.dialogVisible = true;
        this.dTitle = '编辑药品分类';
    }
    /** 删除 */
    public delHandle(id) {
        this.$confirm('确认删除当前药品分类吗？').then((e) => {
            api.DrugClassification_DeleteDrugClassificationById({ id: id }).then(() => {
                this.$message.success('删除药品分类成功');
                this.loadData();
            });
        });
    }
    /** 禁用 */
    public optHandle(id, enableStatus) {
        console.log('enableStatus', enableStatus);
        this.$confirm('确认' + (enableStatus ? '启用' : '禁用') + '当前药店吗？').then((e) => {
            api.Pharmacy_PutAdminPharmacyEnableStatus({ id: id, enableStatus: enableStatus }).then(() => {
                this.$message.success(enableStatus ? '启用药店成功' : '禁用药店成功');
                this.loadData();
            });
        });
    }
    /** 提交保存按钮 */
    public submitForm() {
        this.$refs.form.validate((valid) => {
            if (valid) {
                if (this.dTitle == '新增药品分类') {
                    this.$confirm('确认新增当前药品分类吗？').then((e) => {
                        api.DrugClassification_PostDrugClassificationInfo(this.form).then(() => {
                            this.$message.success('新增药品分类成功');
                            this.dialogVisible = false;
                            this.loadData();
                        });
                    });
                } else {
                }
            }
        });
    }
}
</script>

<style lang="scss" scoped>
.statuscolor1 {
    background: #ffca1b;
}
.statuscolor2 {
    background: red;
}
.statuscolor3 {
    background: #f53e3e;
}
.statuscolor4 {
    background: #b7cad7;
}
.statuscolor5 {
    background: #22cc31;
}
.statuscolor6 {
    background: #409eff;
}
.statusPrompt {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}
.line-btn {
    background-color: #8162b9;
    border-color: #8162b9;
    color: #fff;
}
.line-btn:hover,
.line-btn:focus {
    background-color: #8162b9;
    border-color: #8162b9;
    opacity: 0.7;
    color: #fff;
}
i {
    cursor: pointer;
}

.w {
    width: 352px;
}
.operation span {
    cursor: pointer;
    color: #c50307;
}
.icon_font {
    position: absolute;
    top: 10px;
    right: 7px;
}
/deep/ input[type='password']::-ms-reveal {
    display: none;
}

.primary {
    position: relative;
    top: 1px;
    background-color: #c50307;
    border: #c50307;
}
.primary img {
    width: 16px;
}

.isEnable {
    width: 10px;
    height: 10px;
    background-color: #6dd400;
    border-radius: 10px;
}
.isDisable {
    width: 10px;
    height: 10px;
    background-color: #d8d8d8;
    border-radius: 10px;
}
.positontips {
    position: absolute;
    right: 152px;
    top: 0px;
}

.btnTree {
    margin-left: 40px;
}

.btnTree2 {
    float: right;
    margin-right: 20px;
}

/deep/ .el-dialog__body {
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
}

// /deep/.el-tree .el-tree-node__expand-icon.expanded {
//     -webkit-transform: rotate(0deg);
//     transform: rotate(0deg);
// }

// //有子节点 且未展开
// /deep/ .el-icon-caret-right:before {
//     background: url('../../../../assets/img/add.png') no-repeat 0 3px;
//     content: '';
//     display: block;
//     width: 15px;
//     height: 15px;
//     font-size: 16px;
//     background-size: 16px;
// }
// //有子节点 且已展开
// /deep/ .expanded.el-tree-node__expand-icon.el-icon-caret-right:before {
//     background: url('../../../../assets/img/reduce.png') no-repeat 0 3px;
//     content: '';
//     display: block;
//     width: 15px;
//     height: 15px;
//     font-size: 16px;
//     background-size: 16px;
// }
// //没有子节点
// /deep/ .is-leaf.el-tree-node__expand-icon.el-icon-caret-right:before {
//     background: none;
//     content: '';
//     display: block;
//     width: 15px;
//     height: 15px;
//     font-size: 16px;
//     background-size: 16px;
// }
</style>
